<!--
  Save icons and the pseudo checkbox so that they can be re-used in the template without
  duplication. Also content can only be injected once so we need to extract icons/avatars
  into a template since we use it in multiple places.
-->
<ng-template #icons>
  <ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]">
  </ng-content>
</ng-template>

<ng-template #checkbox>
  <div class="mdc-checkbox" [class.mdc-checkbox--disabled]="disabled">
    <input type="checkbox" class="mdc-checkbox__native-control"
           [checked]="selected" [disabled]="disabled"/>
    <div class="mdc-checkbox__background">
      <svg class="mdc-checkbox__checkmark"
           viewBox="0 0 24 24">
        <path class="mdc-checkbox__checkmark-path"
              fill="none"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
      <div class="mdc-checkbox__mixedmark"></div>
    </div>
  </div>
</ng-template>

<!-- Container for the checkbox at start. -->
<span class="mdc-list-item__graphic mat-mdc-list-option-checkbox-before"
      *ngIf="_shouldShowCheckboxAt('before')">
  <ng-template [ngTemplateOutlet]="checkbox"></ng-template>
</span>
<!-- Conditionally renders icons/avatars before the list item text. -->
<ng-template [ngIf]="_shouldShowIconsAndAvatarsAt('before')">
  <ng-template [ngTemplateOutlet]="icons"></ng-template>
</ng-template>

<!-- Text -->
<span class="mdc-list-item__text" #text>
  <ng-content></ng-content>
</span>

<!-- Container for the checkbox at the end. -->
<span class="mdc-list-item__meta" *ngIf="_shouldShowCheckboxAt('after')">
  <ng-template [ngTemplateOutlet]="checkbox"></ng-template>
</span>
<!-- Conditionally renders icons/avatars after the list item text. -->
<ng-template [ngIf]="_shouldShowIconsAndAvatarsAt('after')">
  <ng-template [ngTemplateOutlet]="icons"></ng-template>
</ng-template>

<!-- Divider -->
<ng-content select="mat-divider"></ng-content>

<!--
  Strong focus indicator element. MDC uses the `::before` pseudo element for the default
  focus/hover/selected state, so we need a separate element.
-->
<div class="mat-mdc-focus-indicator"></div>
